<template>
	<view>
		<view class="topbar"></view>
		<view class="top">
			<uni-icons @click="back()" class="back" type="back" size="30"></uni-icons>
			<view>结算</view>
		</view>
		<view class="toptop"></view>
		
		<view class="news" v-if="state==0">
			<view class="number">
				<text>桌号 A3</text>
				<text>用餐人数 {{userNum}}人</text> 
			</view>
			<view class="phone">
				<text>联系电话</text>
				<text>{{phone}}</text>
			</view>
		</view>
	
		<view class="sendnews" v-if="state==1">
			<view class="address">
				<view class="addressnews">
					<text>{{locationinfo.address}}（{{locationinfo.houseNum}}）</text>
					<text>A座</text>
				</view>
				<view class="name">
					<text>{{locationinfo.name}}</text>
					<text>{{locationinfo.phone}}</text>
				</view>
				<uni-icons type="right" size="30" @click="toselectlocaton()"></uni-icons>
			</view>
			<view class="time">
				<view>尽快送达</view>
				<view>
					<text>预计</text>
					<text>10:54</text>
					<text>送达</text>
				</view>
			</view>
		</view>
		
		<view class="list">
			<view>用餐列表</view>
			<view class="form" v-for="(item,index) in orderList">
				<image :src="item.picture"></image>
				<view class="dish">
					<view>{{item.name}}</view>
					<text>{{item.heft}}</text>
					<text>少辣</text>
				</view>
				<view class="dishprice">
					<view>
						<text>￥</text>
						<text>{{item.price}}</text>
					</view>
					<view>
						<text>×</text>
						<text>{{item.num}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="form">
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png" mode=""></image>
				<view class="dish">
					<view>热烤鸡胸蔬菜沙拉</view>
					<text>1人份</text>
					<text>少辣</text>
				</view>
				<view class="dishprice">
					<view>
						<text>￥</text>
						<text>42.0</text>
					</view>
					<view>
						<text>×</text>
						<text>1</text>
					</view>
				</view>
			</view>
			<view class="form">
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png" mode=""></image>
				<view class="dish">
					<view>热烤鸡胸蔬菜沙拉</view>
					<text>1人份</text>
					<text>少辣</text>
				</view>
				<view class="dishprice">
					<view>
						<text>￥</text>
						<text>42.0</text>
					</view>
					<view>
						<text>×</text>
						<text>1</text>
					</view>
				</view>
			</view> -->
			
			<view class="btn" v-if="state==0">
				<button @click="toaddmenu">
					<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%93%E7%AE%97/u2490.png" mode=""></image>
					继续加菜
				</button>
			</view>
		</view>
		
		<view class="allprice">
			<view class="coupon all">
				<text class="left">优惠劵</text>
				<view class="right">
					<text id="num">
						<text v-if="state==1">{{couponNum.takeawayCoupon}}张可用</text>
						<text v-if="state==0">{{couponNum.canteenCoupon}}张可用</text>
					</text>
					<uni-icons type="right" size="30" @click="open(0)"></uni-icons>
					<uni-popup ref="popup" type="bottom">
						
						<view class="Pop-ups" v-if="pop=='0'">
							<view class=".poptop">
								<view class="title">选择优惠</view>
								<img class="close" @click="close" src="https://cdn3.axureshop.com/demo/2116044/images/%E5%A0%82%E9%A3%9F%E7%82%B9%E9%A4%90/clear_u2345.png" alt="">
							</view>
							<view class="listnone"></view>
							<view class="couponlist">
								<radio-group name="radio" v-model="radio">
									<view class="couponform" v-for="(titem,tindex) in coupon" :key="tindex" @click="useCoupon(titem.money,titem.full,titem.id)" v-if="(state==1 && titem.location=='外卖')||(state==0 && titem.location=='食堂')">
										<view class="coupontop">
											<view class="money">
												￥<text id="money">{{titem.money}}</text>
											</view>
											<view class="couponcontent">
												<view>{{titem.name}}</view>
												<view>满{{titem.full}}元可用</view>
											</view>
											<radio class="radio" label="0" value="radio"/></label>
										</view>
										<view class="wrapleft"></view>
										<view class="wrapright"></view>
										<view class="use">
											<view>有效期至{{titem.time}}</view>
											<view>{{titem.location}}可用</view>
										</view>
									</view>
								</radio-group>
							</view>
						</view>
						
						<view class="warp" v-if="pop==1" >
							<view class="warptop">
								<view class="title">选择餐具</view>
								<img class="close" @click="close" src="https://cdn3.axureshop.com/demo/2116044/images/%E5%A0%82%E9%A3%9F%E7%82%B9%E9%A4%90/clear_u2345.png" alt="">
							</view>
							<view class="tabbtn">
								<view v-for="(item, index) in waraNum" :key="index" v-if="item.number!='8'" class="tabrow">
									<view :class="[wid == index ? 'active' : 'select']" @click="choseItem(index)">
										<text style="margin-left: 25rpx;" v-if="item.number=='0'">无需餐具</text>
										<text style="margin-left: 55rpx; font-weight: bold;" class="grid-text" v-if="item.number!='0'">{{ item.number }}份</text>
									</view>
								</view>
								<view class="eight" :class="[wid == 8 ? 'eiactive' : 'eiselect']" @click="choseItem(8)">
									<view class="eiwrap">
										<img  @click="reduce()" src="https://cdn8.axureshop.com/demo/2116044/images/%E7%BB%93%E7%AE%97_1/remove_circle_u2954.png" alt="">
										<view>{{number}}份</view> 
										<img @click="add()" src="https://cdn8.axureshop.com/demo/2116044/images/%E7%BB%93%E7%AE%97_1/add_circle_u2953.png" alt="">
									</view>
								</view>
							</view>
						</view>
						
					</uni-popup>
				</view>
			</view>
			<view class="deduction all">
				<text class="left" v-if="state == 0">折扣金额</text>
				<text class="left" v-if="state == 1"> 配送费</text>
				<view class="right">
					<text>-￥</text>
					<text>{{delmoney}}</text>
				</view>
			</view>
			<view class="subtotal all">
				<text class="left">小计</text>
				<view class="right">
					<text>￥</text>
					<text>{{paymoney}}</text>
				</view>
			</view>
		</view>
		<view class="remark">
			<view class="waranum" v-if="state==1">
				<view>餐具数量</view>
				<view>请选择</view>
				<uni-icons type="right" size="30" @click="open(1)"></uni-icons>
			</view>
			<view class="mark">备注</view>
			<textarea class="input" name="remark" placeholder="请输入订单备注......" placeholder-class="placeholderStyle"  bindinput="remarkInputAction" />
		</view>
		<view class="buttom"></view>
		<view class="bttn">
			<button @click="tocheckout()">
				<view class="left">
					<text>合计</text>
					<text>￥</text>
					<text>{{paymoney}}</text>
				</view>
				<view class="right" >
					<text>提交支付</text>
				</view>
			</button>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				state:1,
				userid:'1',
				pop:'0',
				waraNum:[
					{
						number:'0'
					},
					{
						number:'1'
					},
					{
						number:'2'
					},
					{
						number:'3'
					},
					{
						number:'4'
					},
					{
						number:'5'
					},
					{
						number:'6'
					},
					{
						number:'7'
					},
					{
						number:'8'
					}
				],
				number:'8',
				wid:'0',
				selectlid:'0',
				locationinfo:[],
				couponNum:[],
				coupon:[],
				paymoney:'0',
				delmoney:'0',
				phone:'',
				userNum:'',
				sendItem:{},
				orderList:[],
			}
		},
		methods: {
			back(){
				let pages = getCurrentPages();
				console.log(pages);
				let backPages = pages.length - 1;
				uni.navigateBack({
					delta:backPages,
				})
			},
			open(pop){
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.pop=pop
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			opennum(){
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			choseItem: function(index) {
				console.log(index)
				this.wid = index;
			},
			add(){
				this.number = Number(this.number) + 1;
			},
				
			reduce(){
				if(Number(this.number)>8){
					this.number = Number(this.number) - 1;
				}
			},
			toselectlocaton(){
				uni.navigateTo({
					url:"/pages/selectaddress/selectaddress"
				})
			},
			tocheckout(){
				uni.navigateTo({
					url:"/pages/checkout/checkout?paymoney="+this.paymoney+'&phone='+this.phone,
				})
			},
			twoMath(num){
				let tempVal = Number(num).toFixed(2);
				let realVal = tempVal.substring(0, tempVal.length - 1);
				// this.paymoney = realVal;
				return realVal;
			},
			toaddmenu(){
				uni.switchTab({
					url:'/pages/Dine-in/Dine-in'
				})
			},
			useCoupon(money,full,id){
				console.log(money,full);
				if(this.paymoney >= full){
					console.log(this.paymoney);
					this.paymoney = this.paymoney - money;
					if(this.state == 0){
						this.couponNum.canteenCoupon=this.couponNum.canteenCoupon-1;
						console.log(this.couponNum.canteenCoupon);
					}else if(this.state == 1){
						this.couponNum.takeawayCoupon =this.couponNum.takeawayCoupon-1;
						console.log(this.couponNum.takeawayCoupon);
					}
					http({
						url:'/delectCoupon',
						method:'post',
						data:{
							id:id
						},
						success:(res)=>{
							console.log(res)
						}
					});
					http({
						url:'/editCoupon',
						method:'post',
						data:{
							takeawayCoupon:this.couponNum.takeawayCoupon,
							canteenCoupon:this.couponNum.canteenCoupon,
						},
						success:(res)=>{
							console.log(res);
						}
					});
				}else{
					this.paymoney = this.paymoney;
				}
			}
		},
		onShow(){
			this.userid = uni.getStorageSync('userid');
			let selectlid=uni.getStorageSync('selectlid');
			console.log(selectlid);
			this.selectlid=selectlid.selectlid
			console.log(this.selectlid);
			http({
				url:'/selsettlelocation',
				method:'post',
				data:{
					selectlid:this.selectlid,
				},
				success: (res) => {
					console.log(res);
					this.locationinfo=res.data[0];
					console.log(this.locationinfo);
				}
			});
			http({
				url:'/selsettleCouponNUm',
				method:'post',
				data:{
					userid:this.userid,
				},
				success: (res) => {
					console.log('111');
					console.log(res);
					console.log(this.userid);
					this.couponNum=res.data[0];
					console.log(this.couponNum);
					this.phone = this.couponNum.phone
				},
			});
			http({
				url:'/selsettleCoupon',
				method:'post',
				data:{
					userid:this.userid,
				},
				success: (res) => {
					// console.log(res);
					this.coupon = res.data;
					console.log('coupon');
					console.log(this.coupon);
				}
			});
			
		},
		onLoad:function(option){
			console.log('66666');
			console.log(option);
			this.orderList=uni.getStorageSync('orderList');
			this.delmoney=uni.getStorageSync('delmoney');
			// this.state = option.state;
			// console.log(this.state);
			// this.delmoney = option.fee;
			// this.paymoney = option.sum-option.fee;
			// console.log(option.orderList);
			// console.log("orderList");
			// console.log(option.sendItem);
			// console.log(option.sendItem[1]);
			this.paymoney = this.twoMath(this.paymoney);
			this.delmoney = this.twoMath(this.delmoney);
			this.userid = uni.getStorageSync('userid');
			this.userNum = uni.getStorageSync('userNum');
			this.paymoney = uni.getStorageSync('paymoney');
			// this.phone = uni.getStorageSync('userNum');
			// this.userid = uni.getStorage({
			// 	key:'userid'
			// })
			this.sendItem = JSON.parse(option.sendItem);
			console.log('bbb');
			console.log(this.sendItem)
			this.state = this.sendItem.status;
			if(this.state == 1){
				this.delmoney = this.sendItem.fee;
				this.paymoney =  this.sendItem.sum - this.delmoney;
				uni.setStorageSync('delmoney',this.delmoney);
			}else if(this.state == 0){
				this.delmoney = this.sendItem.discount;
				this.paymoney =  this.sendItem.sum;
				uni.setStorageSync('delmoney',this.delmoney);
			}
			
			this.orderList = this.sendItem.orderList;
			uni.setStorageSync('orderList',this.orderList);
			console.log(this.orderList);
			// this.paymoney =  this.sendItem.sum - this.delmoney;
			let tempVal = Number(this.paymoney).toFixed(2);
			let realVal = tempVal.substring(0, tempVal.length - 1);
			// this.paymoney = realVal;
			this.paymoney = realVal;
			uni.setStorageSync('paymoney',this.paymoney);
		},
	}
</script>

<style>
page{
	background-color: #F2F2F2;
}
.topbar{
	width: 100%;
	background-color: #ffffff;
	height: 1rpx;
}
.toptop{
	height: 120rpx;
}
.top{
	padding-top: 60rpx;
	padding-bottom: 20rpx;
	display: flex;
	justify-content: center;
	font-size: 30rpx;
	background-color: #ffffff;
	position: fixed;
	width: 100%;
}
.top>.back{
	position: absolute;
	left: 0;
	zoom: 0.8;
}
.news{
	width: 690rpx;
	height: 140rpx;
	margin: 30rpx;
	background-color: #ffffff;
	border-radius: 15rpx;
}
.news view{
	padding-left: 30rpx;
}
.news .number{
	padding-top: 30rpx;
	font-size: 26rpx;
}
.news .number text:nth-child(1){
	padding-right: 10rpx;
}
.news .phone{
	font-size: 20rpx;
	margin-top: 20rpx;
	color: #999999;
}
.news .phone text:nth-child(1){
	padding-right: 10rpx;
}

.sendnews{
	width: 690rpx;
	height: 250rpx;
	background-color: #ffffff;
	margin-left: 30rpx;
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	border-radius: 15rpx;
}
.sendnews .address{
	width: 630rpx;
	height: 120rpx;
	margin-left: 30rpx;
	padding-top: 30rpx;
	border-bottom: #F2F2F2 1rpx solid;
	/* display: flex; */
}
.sendnews .address text{
	font-size: 30rpx;
}
.sendnews .address text:nth-child(1){
	margin-top: 30rpx;
}
.sendnews .address uni-icons{
	zoom: 0.5;
	position: absolute;
	right: 80rpx;
	top: 440rpx;
}
.sendnews .name text{
	font-size: 25rpx;
	color: #999999;
	margin-top: 10rpx;
}
.sendnews .name text:nth-child(1){
	margin-right: 10rpx;
}
.sendnews .time{
	margin-top: 30rpx;
	font-size: 25rpx;
	margin-left: 30rpx;
	display: flex;
}
.sendnews .time view:nth-child(2){
	position: absolute;
	right: 60rpx;
}
.sendnews .time view:nth-child(2) text:nth-child(2){
	color: #f77214;
}
.list{
	width: 690rpx;
	background-color: #ffffff;
	margin-left: 30rpx;
	border-radius: 15rpx;
	padding-bottom: 30rpx;
}
.list view:nth-child(1){
	font-size: 26rpx;
	padding-top: 30rpx;
	padding-left: 30rpx;
	padding-bottom: 10rpx;
}
.list .form{
	display: flex;
	width: 630rpx;
	height: 160rpx;
	margin-left: 30rpx;
	padding-top: 0rpx;
	border-bottom: #F2F2F2 solid 1rpx;
}
.list .form image{
	margin-top: 20rpx;
	width: 120rpx;
	height: 120rpx;
}
.list .form .dish text{
	font-size: 20rpx;
	margin-left: 10rpx;
	color: #999999;
}
.list .form .dish text:nth-child(2){
	margin-left: 30rpx;
}
.list .form .dishprice{
	font-size: 20rpx;
	margin-left: 20rpx;
	position: absolute;
	right: 60rpx;
}
.list .form .dishprice view:nth-child(2){
	margin-top: 15rpx;
	position: absolute;
	right: 0rpx;
	color: #999999;
}
.btn{
	height: 100rpx;
	width: 100%;
	padding-top: 10rpx;
	background-color: #ffffff;
}
.btn button{
	width: 650rpx;
	background-color: #ffffff;
	color: #f77214;
	font-size: 30rpx;
	margin-top: 20rpx;
	border-radius: 50rpx;
	border: #f77214 1rpx solid;
}
.btn button image{
	width: 25rpx;
	height: 25rpx;
	margin-right: 10rpx;
}
.allprice{
	width: 690rpx;
	height: 270rpx;
	margin-top: 30rpx;
	margin-left: 30rpx;
	background-color: #ffffff;
	border-radius: 15rpx;
}
.allprice .all{
	height: 90rpx;
	line-height: 90rpx;
	width: 630rpx;
	margin-left: 30rpx;
	display: flex;
}
.allprice .left{
	font-size: 25rpx;
	color: #999999;
	width: 100%;
}
.allprice .right{
	position: absolute;
	right: 60rpx;
}
.allprice .coupon{
	border-bottom: 1rpx #F2F2F2 solid;
}
.allprice .coupon .right #num{
	font-size: 25rpx;
	color: #f77214;
}
.allprice .coupon .right uni-icons{
	zoom: 0.4;
}
.allprice radio-group view radio{
/* 	position: absolute;
	right: 45rpx; */
	position: relative;
	left: 200rpx;
	/* cursor: pointer; */
}
.allprice .coupon .right .close{
	width: 22rpx;
	height: 22rpx;
	position: absolute;
	right: 40rpx;
	margin-top: 35rpx;
}
.allprice .coupon .right .Pop-ups{
	width: 100%;
	height: 820rpx;
	background-color: #ffffff;
	border-top-left-radius: 60rpx;
	border-top-right-radius: 60rpx;
	overflow-y: scroll;
}
.Pop-ups .poptop{
	display: flex;
	width: 100%;
	justify-content: center;
	position: fixed;
	width: 100%;
	background-color: #ffffff;
	height: 100rpx;
	z-index: 2;
}
.listnone{
	height: 100rpx;
}
.couponlist .couponform{
	margin-left: 30rpx;
	/* border: #333333 solid 1rpx; */
	border: 1rpx solid #f2f2f2;
	width: 690rpx;
	height: 210rpx;
	border-radius: 15rpx;
	margin-top: 30rpx;
	box-shadow: 5rpx 5rpx 5rpx 5rpx #f2f2f2;
	z-index: 1;
}
.couponlist .couponform .wrapleft{
	width: 15rpx;
	height: 30rpx;
	background-color: #f5f7f7;
	border-radius: 0rpx 15rpx 15rpx 0rpx;
	position: relative;
	bottom: 15rpx;
	right: 1rpx;
}
.couponlist .couponform .wrapright{
	width: 15rpx;
	height: 30rpx;
	background-color: #f5f7f7;
	border-radius: 15rpx 0rpx 0rpx 15rpx;
	position: relative;
	left: 678rpx;
	bottom: 48rpx;
}
.couponlist .couponform .coupontop{
	display: flex;
	border-bottom: #F2F2F2 1rpx dashed;
	height: 140rpx;
	margin-left: 30rpx;
	/* border: #f77214 1rpx solid; */
}
.couponlist .couponform .money{
	color: #f77214;
	margin-top: 20rpx;
}
.couponlist .couponform .money #money{
	font-size: 90rpx;
	font-weight: bold;
}
.couponlist .couponform .couponcontent view:nth-child(1){
	font-size: 30rpx;
}
.couponlist .couponform .couponcontent view:nth-child(2){
	font-size: 25rpx;
	position: relative;
	bottom: 40rpx;
	color: #999999;
}
.couponlist .couponform .use{
	display: flex;
	/* position: absolute; */
	color: #999999;
	font-size: 25rpx;
	position: relative;
	bottom: 70rpx;
	margin-left: 30rpx;
}
.couponlist .couponform .use view:nth-child(2){
	position: absolute;
	right: 30rpx;
}
.couponlist .couponform .radio{
	/* margin-top: 20rpx; */
}
radio .wx-radio-input {
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
}
radio .wx-radio-input.wx-radio-input-checked {
  background-color: #f77214;
  border-color: #f77214;
}
radio .wx-radio-input.wx-radio-input-checked::before {
 content: ''; 
 width: 10rpx;
 height: 10rpx;
 border-radius: 50%;
 background-color: #ffffff;
}
.allprice .deduction{
	border-bottom: 1rpx #F2F2F2 solid;
}
.allprice .deduction .right{
	font-size: 25rpx;
}
.allprice .subtotal .right{
	font-size: 30rpx;
}

.remark{
	width: 690rpx;
	background-color: #ffffff;
	margin-top: 30rpx;
	margin-left: 30rpx;
	border-radius: 15rpx;
	margin-bottom: 10rpx;
}
.remark .waranum{
	color: #999999;
	font-size: 25rpx;
	height: 90rpx;
	line-height: 90rpx;
	display: flex;
	width: 630rpx;
	margin-left: 30rpx;
	border-bottom: 1rpx #f2f2f2 solid;
}
.remark .waranum view:nth-child(2){
	color: #f77214;
	position: absolute;
	right: 85rpx;
}
.remark .mark{
	padding-top: 30rpx;
	padding-left: 30rpx;
	color: #999999;
	font-size: 25rpx;
}
.remark .waranum uni-icons{
	zoom: 0.4;
	position: absolute;
	right: 140rpx;
}
.input{
	width: 630rpx;
	margin: 30rpx;
	color: #666666;
	font-size: 25rpx;
}
.placeholderStyle{
	color: #CCCCCC;
}
.buttom{
	height: 130rpx;
}
.bttn{
	width: 100%;
	height: 130rpx;
	position: fixed;
	background-color: #F2F2F2;
	bottom: 0;
}
.bttn button{
	width: 690rpx;
	height: ;
	border-radius: 50rpx;
	display: flex;
	background-color: #333333;
	color: #ffffff;
}
.bttn button view{
	font-size: 30rpx;
}
.bttn button .left{
	width: 75%;
}
.bttn button .left text{
	position: relative;
	right: 150rpx;
}
.bttn button .left text:nth-child(1){
	font-size: 20rpx;
}
.bttn button .right{
	font-size: 29rpx;
	height: 100%;
	position: absolute;
	right: 0;
	float: right;
	width: 35%;
	background-color: #f77214;
}

.warp{
	width: 100%;
	background-color: #ffffff;
	height: 670rpx;
	border-top-left-radius: 60rpx;
	border-top-right-radius: 60rpx;
}
.warp .warptop{
	display: flex;
	position: relative;
	bottom: 20rpx;
	justify-content: center;
	padding-top: 25rpx;
}
.warp .warptop .title{
	justify-content: center;
}
.warp .active {
	width: 150rpx;
	height: 60rpx;
	line-height: 60rpx;
	margin-right: 20rpx;
	border-radius: 50rpx;
	background-color: #fff0e9;
	border-width: 2rpx;
	border-style: solid;
	border-color: #fff0e9;
	color: #ff5c18;
	font-size: 25rpx;
}
.warp .select {
	width: 150rpx;
	height: 60rpx;
	line-height: 60rpx;
	margin-right: 20rpx;
	border-radius: 50rpx;
	border-width: 2rpx;
	border-style: solid;
	border-color: #f0f3f7;
	color: #999999;
	background-color: #f0f3f7;
	font-size: 25rpx;
}
.warp .tabbtn{
	margin-left: 30rpx;
	height: 250rpx;
	display: flex;
	flex-wrap: wrap;
}
.warp .tabbtn .tabrow{
	height: 30rpx;
}
.warp .eiactive {
	width: 230rpx;
	height: 60rpx;
	line-height: 60rpx;
	margin-right: 20rpx;
	border-radius: 50rpx;
	background-color: #fff0e9;
	border-width: 2rpx;
	border-style: solid;
	border-color: #fff0e9;
	color: #ff5c18;
	font-size: 25rpx;
}
.warp .eiselect {
	width: 230rpx;
	height: 60rpx;
	line-height: 60rpx;
	margin-right: 20rpx;
	border-radius: 50rpx;
	border-width: 2rpx;
	border-style: solid;
	border-color: #f0f3f7;
	color: #999999;
	background-color: #f0f3f7;
	font-size: 25rpx;
}
.eight .eiwrap{
	display: flex;
	height: 60rpx;
	line-height: 60rpx;
}
.eight img{
	width: 35rpx;
	height: 35rpx;
}
.eight img:nth-child(1){
	margin-left: 20rpx;
	margin-right: 55rpx;
	margin-top: 15rpx;
}
.eight view:nth-child(2){
	font-weight: bold;
	position: absolute;
	right: 580rpx;
}
.eight img:nth-child(3){
	margin-top: 15rpx;
	margin-left: 60rpx;
}
</style>
